<template>
    <h2>App父组件：Suspense</h2>
    <child></child>
<!--    <Suspense> &lt;!&ndash; 底层也是用插槽实现的 &ndash;&gt;
        <template v-slot:default>
            <child></child>
        </template>
&lt;!&ndash;        <template ><AsyncComponent/></template>&ndash;&gt;
        <template v-slot:fallback> &lt;!&ndash; 如果组件比较慢，就先执行这个，后背 &ndash;&gt;
            &lt;!&ndash;           准备的内容 &ndash;&gt;
            loging.....
        </template>
    </Suspense>-->

</template>

<script lang="ts">
import {
    defineComponent,
        defineAsyncComponent
} from "vue";

// import Child from "./components/Child.vue";
// 动态引入，异步引入
const Child = defineAsyncComponent(() => import("./components/Child.vue"))
console.log(Child)
// 引入组建：静态和动态引入

// vue2动态引入组件(在vue3中这种写法不行)
/*const AsyncComponent = () => {
    import("./components/AsyncComponent.vue")
}*/

// vue3动态引入组件
/*const AsyncComponent = defineAsyncComponent(
    () => import("./components/AsyncComponent.vue")
)*/

// import  AsyncComponent from "./components/AsyncComponent.vue"


export default defineComponent({
    name: "App",
    components: {
        Child,
        // AsyncComponent
    }
})
</script>

<style>

</style>